<template>
    <van-nav-bar @click-left="handleBackClick">
        <template #left>
            <slot name="left">
                <div class="left" @click="leftIconClick">
                    <i class="icon-left-arrow"></i>
                    <span class="left-text">{{ leftText }}</span>
                </div>
            </slot>
        </template>
        <template #title>
            <slot name="title">{{ title }}</slot>
        </template>
        <template #right>
            <slot name="right">
                <van-icon name="wap-nav" size="22" />
            </slot>
        </template>
    </van-nav-bar>
</template>


<script setup>
import { defineEmits } from 'vue'
import { useRouter } from 'vue-router'

defineProps({
    title: {
        type: String,
        default: ''
    },
    leftText: {
        type: String,
        default: ''
    },
})

// 点击返回
const emit = defineEmits(['leftIconClick'])
const router = useRouter()
const handleBackClick = () => {
    router.go(-1)
    emit('leftIconClick')
}

</script>


<style lang="less" scoped>
.left {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    .icon-left-arrow {
        display: inline-block;
        background: url(@/assets/img/common/icon_nav_back.png) 0 0/ 100% 100%;
        width: 8px;
        height: 15px;
    }

    .left-text {
        color: var(--primary-color);
        margin-left: 8px;
        font-weight: 700;
    }
}
</style>